<template>
  <Modal
    v-model="showModal"
    title="选择图标"
    width="900"
    class="main-form-modal main-search select-icon-modal"
    footer-hide
    :mask-closable="false"
    @on-cancel="cancelModal()">
    <!-- 搜索 -->
    <div class="search-block">
      <Input
        type="text"
        class="no-border"
        v-model="searchParams.keyword"
        size="large"
        placeholder="输入英文关键词"
        @on-change="search">
      </Input>
    </div>

    <!-- 切换 -->
    <div class="another-fonts">
      <Checkbox v-model="ifAwesome" border @on-change="setAwesome">font-awesome</Checkbox>
    </div>

    <!-- 图标数据 -->
    <div class="icons-block">
      <div class="icons-item" v-for="(item, index) in iconData" :key="index">
        <div class="item-inner" @click="selectIconItem(item)">
          <!-- <Icon :type="ifAwesome ? `${item} fa` : item" :size="30"/> -->
          <Icon :type="item" :size="30"/>
          <span>{{item}}</span>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import icons from '@/assets/data/icons'
import awesomes from '@/assets/data/font-awesome'
import LinkBtn from '_c/link-btn'
export default {
  name: 'SelectIcon',
  inject: ['setIcon'],
  components: {
    LinkBtn
  },
  props: {
    toggle: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      showModal: false,
      iconData: [],
      searchParams: {
        keyword: ''
      },
      ifAwesome: false,
      curIcon: []
    }
  },
  watch: {
    toggle (newVal) {
      this.showModal = newVal
      if (newVal) {
        this.curIcon = [...icons]
        this.getIconData()
      } else {
        this.ifAwesome = false
      }
    }
  },
  methods: {
    // 切换font-awesome
    setAwesome (val) {
      this.curIcon = val ? [...awesomes] : [...icons]
      this.getIconData(this.searchParams.keyword)
    },
    // 搜索
    search (event) {
      this.getIconData(event.target.value)
    },
    // 选择来源
    selectIconItem (icon) {
      this.setIcon({
        icon
      })
      this.cancelModal()
    },
    // 取消
    cancelModal () {
      this.searchParams = {
        keyword: ''
      }
      this.iconData = []
      this.$emit('update:toggle', false)
    },
    // 获取图标数据
    getIconData (key = '') {
      if (key === '') {
        this.iconData = [...this.curIcon]
      } else {
        let arr = []
        this.curIcon.map(item => {
          if (item.indexOf(key) !== -1) {
            arr.push(item)
          }
        })
        this.iconData = [...arr]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/style/main-panel.styl'

.search-block
  text-align center
  .no-border
    border-width 0px
    width 300px
    & >>> input
      border-width 0px !important
      background #eee
.another-fonts
  &:after
    content ''
    display block
    clear both
  label
    float right
.icons-block
  max-height 60vh
  overflow-y auto
  margin-top 10px
  .icons-item
    display inline-block
    text-align center
    border-radius 4px
    padding 10px
    margin 10px
    width 145px
    height 100px
    .item-inner
      cursor pointer
      &:hover
        color #2d8cf0
      span
        display block
        font-weight bold
        margin-top 10px
</style>
